<template>
  <div class="app-container">
    <div class="mb-20">
      <el-button
        class="btn-active"
        icon="el-icon-plus"
        size="mini"
        @click="goAdd"
      >
        新增字典</el-button
      >
      <el-button
        class="btn-delete"
        icon="el-icon-delete"
        size="mini"
        @click="deleteRow"
        >删除</el-button
      >
    </div>
    <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-select v-model="form.status" placeholder="启用状态">
            <el-option label="未启用" value="1" />
            <el-option label="已启用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="form.createTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="创建时间"
          />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.createBy" placeholder="创建人员" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.dictName" placeholder="字典名称" />
        </el-form-item>
        <el-form-item label="">
          <el-button size="mini" icon="el-icon-search" @click="search"
            >查询</el-button
          >
          <el-button size="mini" icon="el-icon-refresh-right" @click="search(1)"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="加载中"
      border
      fit
      :tree-props="{ children: 'sysDictDataList', hasChildren: 'hasChildren' }"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="字典名称">
        <template slot-scope="scope">
          {{ scope.row.dictName }}
        </template>
      </el-table-column>
      <el-table-column label="字典类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.dictType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="启用状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="green-tag">停用</span>
          <span v-if="scope.row.status == 0" class="other-tag">正常</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <el-button
            class="detail"
            icon="el-icon-edit-outline"
            @click="goEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            class="detail"
            icon="el-icon-edit-outline"
            @click="setDict(scope.row)"
            >字典配置</el-button
          >
          <!-- <el-button class="detail" icon="el-icon-remove">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      :title="isAdd ? '添加字典' : '编辑字典'"
      :visible.sync="dialogFormVisible"
      :modal="false"
      width="800px"
    >
      <el-form ref="dialogForm" :model="dialogForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="字典名称"
              prop="dictName"
              :rules="{
                required: true,
                message: '字典名称不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.dictName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="字典类型"
              prop="dictType"
              :rules="[
                {
                  required: true,
                  message: '字典名称不能为空',
                  trigger: 'blur',
                },
                {
                  pattern: /^[a-z][a-z0-9_]*$/,
                  message:
                    '字典类型必须以字母开头，且只能为(小写字母，数字，下滑线)',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input v-model="dialogForm.dictType" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="dialogForm.remark" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <div class="el-input">
                <el-radio-group v-model="dialogForm.status" size="small">
                  <el-radio :label="0">启用</el-radio>
                  <el-radio :label="1">未启用</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="center">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button class="cancel" @click="dialogFormVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-drawer
      title="字典配置"
      :visible.sync="drawer"
      :modal="false"
      :direction="direction"
      :before-close="handleClose"
      style="margin: 20px"
    >
      <!-- <div class="search">
        <el-form inline ref="form2" :model="dialogForm">
          <el-form-item label="名称">
            <el-input v-model="searchForm.dictLabel" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="启用状态">
              <el-option label="未启用" value="0"></el-option>
              <el-option label="已启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="primary" @click="addSet">新增</el-button>
          </el-form-item>
        </el-form>
      </div> -->
      <el-button type="primary" style="margin-bottom: 20px" @click="addSet"
        >新增</el-button
      >
      <el-table :data="sysDictDataList" style="height: 71vh; overflow: auto">
        <el-table-column label="字典名称">
          <template slot-scope="scope">
            {{ scope.row.dictLabel }}
          </template>
        </el-table-column>
        <el-table-column label="字典值" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dictValue }}</span>
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="created_at"
          label="操作"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              class="detail"
              icon="el-icon-remove"
              @click="delSet(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <el-dialog
      title="添加字典配置"
      :visible.sync="setVisible"
      :modal="false"
      width="600px"
    >
      <el-form ref="dialogFormSet" :model="dialogFormSet">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              label="字典名称"
              prop="dictLabel"
              :rules="{
                required: true,
                message: '字典名称不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogFormSet.dictLabel" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="数据值"
              prop="dictValue"
              :rules="{
                required: true,
                message: '数据值不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogFormSet.dictValue" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model="dialogFormSet.dictSort" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用">
              <div class="el-input">
                <el-radio-group v-model="dialogFormSet.status" size="small">
                  <el-radio :label="0">启用</el-radio>
                  <el-radio :label="1">未启用</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="center">
        <el-button type="primary" @click="submitSet">新增</el-button>
        <el-button type="primary" @click="setVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { systemList, dictList } from "@/api/table";
import { getSysDictDataDesc } from "@/api/form";
import {
  removeDict,
  dictAdd,
  dictEdit,
  dictTypeAdd,
  removeTypeDict,
} from "@/api/form";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      searchForm: {},
      setVisible: false,
      dialogFormSet: {},
      drawer: false,
      direction: "rtl",
      dialogFormVisible: false,
      dialogForm: {
        status: 0,
      },
      currentPage: 1,
      pageNum: 10,
      total: 0,
      multipleSelection: [],
      form: {},
      list: null,
      isAdd: false,
      options: [],
      listLoading: true,
      sysDictDataList: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    delSet(row) {
      console.log(row);
      // return;
      const that = this;
      removeTypeDict({ ids: row.dictCode }).then((res) => {
        console.log(res);
        getSysDictDataDesc({ dictId: this.dialogFormSet.dictId }).then((re) => {
          console.log(re);
          that.sysDictDataList = re.data;
        });
      });
    },
    submitSet() {
      console.log(this.dialogFormSet.dictCode);

      this.$refs["dialogFormSet"].validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.dialogFormSet));
          delete data.sysDictDataList;
          dictTypeAdd(data).then((res) => {
            this.setVisible = false;
            getSysDictDataDesc({ dictId: this.dialogFormSet.dictId }).then(
              (re) => {
                console.log(re);
                this.sysDictDataList = re.data;
              }
            );
          });
        }
      });
    },
    addSet() {
      this.setVisible = true;
    },
    handleClose() {
      this.drawer = false;
    },
    setDict(row) {
      this.dialogFormSet.dictId = row.dictId;
      this.dialogFormSet.dictType = row.dictType;
      this.dialogFormSet.dictCode = row.dictCode;
      this.dialogFormSet.status = 0;
      this.sysDictDataList = row.sysDictDataList;
      this.drawer = true;
      console.log(this.dialogFormSet);
    },
    goEdit(row) {
      this.isAdd = false;
      this.dialogFormVisible = true;
      row.status = Number(row.status);
      this.dialogForm = JSON.parse(JSON.stringify(row));
    },
    search(num) {
      if (num == 1) {
        this.form = {};
      }
      this.currentPage = 1;
      this.fetchData();
    },
    submit() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogForm.dictId) {
            dictEdit(this.dialogForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.dialogFormVisible = false;
                this.fetchData();
              }
            });
          } else {
            dictAdd(this.dialogForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.dialogFormVisible = false;
                this.fetchData();
              }
            });
          }
        }
      });
    },
    deleteRow() {
      removeDict({
        ids: this.multipleSelection.map((item) => item.dictId).join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.fetchData();
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    goAdd() {
      this.isAdd = true;
      this.dialogForm = { status: 0 };
      this.dialogFormVisible = true;
    },
    fetchData() {
      this.listLoading = true;
      dictList({
        pageSize: this.pageNum,
        pageNum: this.currentPage,
        ...this.form,
      }).then((res) => {
        this.list = res.rows;
        this.listLoading = false;
        this.total = res.total;
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  .detail.el-button {
    padding: 9px 4px;
  }
}
::v-deep {
  .v-modal {
    background: none;
  }
}
::v-deep {
  .el-dialog {
    color: white;
    background: rgb(3, 28, 43);
    .el-dialog__title,
    .el-form-item__label {
      color: white;
    }
  }
}
</style>
